import React, { useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect, routerRedux } from 'dva';
import { Modal } from 'antd';
import ImageName from '../../components/ImageName';
import UploadNode from '../../components/UploadNode';

function index({ dispatch, wineList, updata, currentUser }) {
  const { confirm } = Modal;
  useEffect(() => {
    dispatch({
      type: 'wineInfo/apiGetWineList',
      payload: { exhibitorID: currentUser.exhibitorID },
    });
  }, []);
  useEffect(() => {
    // if (updata) {
    //   dispatch({ type: 'wineInfo/apiGetWineList' });
    // }
    dispatch({
      type: 'wineInfo/apiGetWineList',
      payload: { exhibitorID: currentUser.exhibitorID },
    });
  }, [updata]);

  const handelOnClick = () => {
    // dispatch(routerRedux.push(`/wineInfo/WineEdit/${1}`));
    dispatch(routerRedux.push(`/wineInfo/WineEdit/0`));
  };
  const showConfirm = (id) => {
    confirm({
      title: '您确定要删除该酒款吗?',
      // icon: <ExclamationCircleOutlined />,
      content: '若删除将无法恢复',
      onOk() {
        dispatch({ type: 'wineInfo/apiDeleteWine', payload: { id } });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  const handelDelete = (id) => {
    showConfirm(id);
  };
  const handelEdit = async (id) => {
    await dispatch(routerRedux.push(`/wineInfo/WineEdit/${id}`));
  };
  return (
    <PageHeaderWrapper>
      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start' }}>
        <UploadNode handelOnClick={handelOnClick} />
        {wineList &&
          wineList.map((item) => {
            return (
              <ImageName
                img={item.wineLabelUrl}
                key={item.id}
                handelDelete={() => {
                  handelDelete(item.id);
                }}
                handelEdit={handelEdit}
                id={item.id}
                NameNode={
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <span
                      style={{
                        color: '#8C8C8C',
                        fontSize: 16,
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        paddingLeft: 24,
                      }}
                    >
                      {item.nameCn}
                    </span>
                    <span
                      style={{
                        color: '#8C8C8C',
                        fontSize: 16,
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        paddingLeft: 24,
                      }}
                    >
                      {item.nameEn}
                    </span>
                  </div>
                }
                // name={}
              />
            );
          })}
      </div>
    </PageHeaderWrapper>
  );
}

export default connect(({ wineInfo, user }) => {
  return {
    wineList: wineInfo.wineList,
    updata: wineInfo.updata,
    currentUser: user.currentUser,
  };
})(index);
